<template>
  <div class="admin-detail-box" >   
    <row title="姓名" :value="adminDetail.nickName"></row>
    <row title="账号" :value="adminDetail.userName"></row>
    <row title="状态" :value="adminDetail.status == 1 ? '正常':'冻结'"></row>
    <div class="manage-shop-list">
        <div class="manage-title">管理店铺</div>
        <div class="admin-shop-list" v-for="(item,index) in adminDetail.storeList" :key="index">
            <div class="shop-name">{{item.storeName}}</div>
            <div class="shop-adreess">{{item.province}}{{item.city}}{{item.district}}{{item.adreess}}</div>
        </div>
    </div>
     <div class="manage-shop-list">
        <div class="manage-title">管理仓库</div>
        <div class="admin-shop-list" v-for="(item,index) in adminDetail.replWarehouseList" :key="index">
            <div class="shop-name">{{item.name}}</div>
            <div class="shop-adreess">{{item.province}}{{item.city}}{{item.district}}{{item.adreess}}</div>
        </div>
    </div>
    <div class="height120"></div>
    <div class="btn-box">  
       <div class="isbtn rightline" v-if="adminDetail.status==1" @click="disabledAdmin">冻结</div>
       <div class="isbtn rightline" v-else @click="undisabledAdmin">解冻</div>
       <div class="isbtn rightline" @click="resetPassword">初始密码</div>
       <div class="isbtn" @click="goEdit">修改</div>
    </div>
    <div >
      <confirm v-model="confirm_show"
        :title="confirm.title"   
        @on-confirm="onConfirm" >
        <p style="text-align:center;">{{ confirm.content }}</p>
      </confirm>
    </div>
  </div>
</template>

<script>
import row from '@/components/row'
import { Message } from 'element-ui' 
import api from '@/api/api.js' 
import { Confirm } from 'vux'
export default { 
  components: {
    row,
    Confirm
  },
  data () {
    return { 
        confirm:{
            content:'',
            title:'',
        },
        confirm_show:false,
        adminDetail:{ 
          replWarehouseList:[],
          storeList:[]
        }
    }
  },
  mounted () { 
    this.getDetail(this.$route.query.id);
  },
  filters: {
     
  },
  methods: { 
      getDetail(id){
          api.adminMng.adminDetail({
              channelUserId:id
          },res=>{
            console.log(res); 
            this.adminDetail = res.result;
        })
      },
      goEdit(){
        this.$store.commit("setShopList",[]);
        this.$store.commit("setAdminDetail",this.adminDetail);
        this.$router.push("/adminEdit");
      },
      disabledAdmin(){
        this.confirm={
            content:'确认冻结此账号吗？',
            title:'提示',
        }
        this.act_idx=1;
        this.confirm_show=true;
      },
      undisabledAdmin(){
           this.confirm={
            content:'确认解除冻结吗？',
            title:'提示',
        }
        this.act_idx=2;
        this.confirm_show=true;
      },
      onConfirm(){
          if(this.act_idx==1){//执行冻结
            this.setStoreAdminStatus('0')
          }else if(this.act_idx==2){//解除冻结
            this.setStoreAdminStatus(1)
          }else if(this.act_idx==3){//重置密码
             api.adminMng.resetStoreAdminPwd({
              channelUserId:this.$route.query.id, 
          },res=>{   
             return  Message({
                message: " 密码已初始化成功,请通知该管理员尽快修改密码",
                type: 'success',
                duration: 2 * 1000
            })
        })
          }
      },
      setStoreAdminStatus(status){
          api.adminMng.setStoreAdminStatus({
              channelUserId:this.$route.query.id,
              status:status
          },res=>{ 
             this.getDetail(this.$route.query.id);
             return  Message({
                message: "更新成功!",
                type: 'success',
                duration: 1 * 1000
            })
        })
      },
      resetPassword(){
        this.confirm={
            content:'确认重置该管理员密码么？',
            title:'提示',
        }
        this.act_idx=3;
        this.confirm_show=true;
      }

  }
}
</script>
<style lang="less" scoped>
.manage-shop-list{
    padding: 20px;
}
.manage-title{
    position: relative;
    padding-bottom: .20rem;
    font-weight: bold;
    font-size: .30rem;
}
.btn-box{
    display: flex;
    background: #fff;
    height: 50px;
    box-sizing: border-box;
    position: fixed;
    box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.06);;
    bottom: 0;
    left: 0;
    right: 0;
    &>div{
        flex: 1;
        text-align: center;
        line-height: 50px;
    }
    .rightline{
        position: relative;
        &::before{
            content: '';
            right: 0;
            top: 18px;
            position: absolute;
            bottom: 18px;
            width: 1px;
            background: #e1e1e1;
        }
    }
}
.height120{
    height: 1.2rem;
}
.admin-shop-list{
    padding-top: .20rem;
    padding-bottom: .20rem;
    border-bottom: 1px solid #f7f7f7;
}

.shop-adreess{
    color: #999;
    margin-top: .12rem;
    font-size: .22rem;
}
</style>